<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时Markdown渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <div id="markdown-content"></div>

    <script>
        async function fetchStreamingData() {
			// 获取 URL 上的参数
			const urlParams = new URLSearchParams(window.location.search);
			// 假设后端接口需要一个名为 input 的参数
			const inputParam = urlParams.get('input');
			let apiUrl = 'http://localhost:8080/chat/doubao/stream';

			if (inputParam) {
				// 如果有参数，将其添加到 URL 中
				apiUrl += `?input=${encodeURIComponent(inputParam)}`;
			}
            const response = await fetch(apiUrl);
            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let markdownContent = '';

            while (true) {
                const { done, value } = await reader.read();
                if (done) break;

                markdownContent += decoder.decode(value, { stream: true });
                document.getElementById('markdown-content').innerHTML = marked.parse(markdownContent);
            }
        }

        fetchStreamingData();
    </script>
</body>
</html>